<template>
<div class="whole">
    <!-- <a-alert message="提交成功" type="success" closabe /> -->
    <!-- <h2 class="title">{{title}}</h2> -->
      <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    :title="title"
    sub-title="在下方进行编辑"
    @back="tobrowser"
  >
<template slot="extra">
    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
     <el-button type="text" @click="open">点击修改博客标题</el-button>

  </template>
    </a-page-header>
  
    <!-- <router-link class="return">返回</router-link> -->
      <mavon-editor v-model="text" :toolbars="toolbars" class="text" />
      
        <el-button
    
    @click="submit" class="btn" type="danger">
    保存
  </el-button>
        <!-- <a-button  @click="tobrowser">
      返回
    </a-button>
   -->

</div>

</template>

<script>
export default {
    data() {
        return {
            //nickName:'阿蛋',
            text:'',
            title:' ',
            toolbars: {
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            strikethrough: true, // 中划线
            mark: true, // 标记
            superscript: true, // 上角标
            subscript: true, // 下角标
            quote: true, // 引用
            ol: true, // 有序列表
            ul: true, // 无序列表
            link: true, // 链接
            imagelink: true, // 图片链接
            code: true, // code
            table: true, // 表格
            fullscreen: true, // 全屏编辑
            readmodel: true, // 沉浸式阅读
            htmlcode: true, // 展示html源码
            help: true, // 帮助
            /* 1.3.5 */
            undo: true, // 上一步
            redo: true, // 下一步
            trash: true, // 清空
            // save: true, // 保存（触发events中的save事件）
            /* 1.4.2 */
            navigation: true, // 导航目录
            /* 2.1.8 */
            alignleft: true, // 左对齐
            aligncenter: true, // 居中
            alignright: true, // 右对齐
            /* 2.2.1 */
            subfield: true, // 单双栏模式
            preview: true, // 预览
  }
        };
    },
    components: {
        // mavonEditor
    },
    created(){
        this.show()
    },
    methods:{
        async submit(){
            const {data:res} = await this.$http.post('http://localhost:8081/blog/updateblog',this.$qs.stringify({number:window.sessionStorage.getItem('number'),title:this.title,content:this.text}))
            if(res.code == 200){
                this.$notify({
          title: '修改成功',
        //   message: '修改成功',
          type: 'success'
        });
                this.show()
            }
            else{
                 this.$notify.error({
          title: '修改失败',
         
        });
            }
            
        },
        tobrowser(){
            this.$router.push('/browser')
        },
        async show(){
        const {data:res} = await this.$http.get('http://localhost:8081/blog/browserblog',{params:{author:window.sessionStorage.getItem('author'),title:window.sessionStorage.getItem('title')}})
        //var i = window.sessionStorage.getItem('number')
        this.title = res.data[0].title
        this.text = res.data[0].content
        },
        // async changeMavon(){
        //     const {data:res} = await this.$http.post('http://localhost:8081/blog/updateblog',this.$qs.stringify({author:window.sessionStorage.getItem('author'),title:window.sessionStorage.getItem('title'),content:this.text}))
            
        // },
        $imgAdd(){

        },
         open() {
        this.$prompt('请输入新标题:', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          
        }).then(({ value }) => {
          this.title = value
           this.submit()
        }).catch(() => {
           this.$notify.warning({
          title: '标题修改取消',
        //   message: '修改成功',
          type: 'success'
        });  
        });
         }
    }
}
</script>
<style lang="less" scoped>
.text{
    width: 100%;
    height: 78%;
    top: 2%;
}
.whole{
    height: 100%;
    //background-image: url("../../assets/bg.jpeg");
    background-color: #DCDFE6;
    //background-size: 100%,100%;
    //position: fixed;
    width: 100%;
}
.btn{
    position: absolute;
    bottom: 2px;
    left: 46%;
    width: 100px;
    
}
.title{
    position: relative;
    top: 4%;
    left: 5px;
    font-family: '隶书';
    font-size: 30px;
}
.return{
    position: absolute;
    
}
</style>